<template>
  <div class="now-money">
    <Echarts
      :options="options" 
      height="100%" 
      width="100%">
    </Echarts>
  </div>
</template>

<script>
import Echarts from "./echarts.vue"
import cockpitApi from '@/api/investment/cockpit'

export default {
  name: "nowMoney",
  props: ['times'],
  components: {
    Echarts
  },
  watch: {
    times: {
      handler(newVal) {
        this.paramsObj.searchBeginTime = newVal && newVal[0]
        this.paramsObj.searchEndTime = newVal && newVal[1]

        this.initOptions()
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      paramsObj: {
        searchBeginTime: "",
        searchEndTime: ""
      },
      options: {
        grid: {
          left: "2%",
          right: "2%",
          top: '30%',
          bottom: "2%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          formatter: function(params) {
            return params.map(function (item) {
              return item.axisValue + '<br>'+ item.value + ' 亿'
            }).join('<br>')
          }
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            splitArea: { show: false },
            data: [],
            axisLine: {
              lineStyle: {
                color: "#4670AB",
              },
            },
            axisTick: {
              show: false 
            }
          },
        ],
        yAxis: [{
          name: '亿元           ',
          axisLabel: {
            textStyle: {
              color: "#7E90AB"
            }
          },
          nameTextStyle: {
            color: "#7E90AB",
            fontSize: 12,
            lineHeight: 12,
            textAlign: "left"
          },
          type: "value",
          splitArea: { show: false },
          splitNumber: 4,
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#3A4C65",
            },
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#B5C5D4",
              fontSize: 12
            },
          },
        }],
        series: [
          {
            type: "line",
            smooth: false,
            showSymbol: false,
            data: [],
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#10498C", // 渐变起始颜色
                  },
                  {
                    offset: 0.8,
                    color: "#063165", // 渐变结束颜色
                  },
                  {
                    offset: 1,
                    color: "#011E44", // 渐变结束颜色
                  },
                ],
              },
            },
            lineStyle: {
              normal: {
                width: 2,
                color: {
                  type: "linear",

                  colorStops: [
                    {
                      offset: 0,
                      color: "#4670AB", // 0% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
            },
            smooth: false,
          },
        ],
      },
    }
  },
  methods: {
    async initOptions() {
      const {data} = await cockpitApi.getInvestmentFixedLine(this.paramsObj)      

      let xAxisData = data.map(item => item.name)
      let seriesData = data.map(item => item.content)

      this.$set(this.options.xAxis[0], 'data', xAxisData)
      this.$set(this.options.series[0], 'data', seriesData)

    }
  }
}
</script>

<style lang="scss" scoped>
.now-money {
  width: 100%;
  height: 13.021vw;
}
</style>
